<template>
  <div class="slider-box">
    <div class="slider-demo-block">
      <span class="demonstration">时间线</span>
      <el-slider v-model="time" :min="0" :max="1" :step="0.01" @input="changeTime" />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">云</span>
      <el-slider v-model="cloud" :min="0" :max="1" :step="0.01" @input="changeCloud" />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">雨</span>
      <el-slider v-model="rain" :min="0" :max="1" :step="0.01" @input="changeRain" />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">雪</span>
      <el-slider v-model="snow" :min="0" :max="1" :step="0.01" @input="changeSnow" />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">大气层</span>
      <el-switch v-model="atmosphere" @change="changeAtmosphere" />
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue'
// const props = defineProps({
//   objm: {
//     type: Object,
//     required: true,
//   },
// })
// 使用inject获取objm
const objm = inject('objm')
const startTime = ref(1747584000000) //5.19 00:00:00 00
const endTime = ref(1747670400000) //5.20 00:00:00 00
const time = ref(0) //时间
const cloud = ref(0) //云
const rain = ref(0) //雨
const snow = ref(0) //雪
const atmosphere = ref(false) //大气层

//时间线
const changeTime = (value) => {
  //毫秒级
  objm.activeViewer.currentTime = value * (endTime.value - startTime.value) + startTime.value
}
//云    Cesium效果待优化
const changeCloud = (value) => {
  objm.activeViewer.cloud = value
}
//雨
const changeRain = (value) => {
  objm.activeViewer.rain = value
}
//雪
const changeSnow = (value) => {
  objm.activeViewer.snow = value
}
//大气层
const changeAtmosphere = (value) => {
  objm.activeViewer.atmosphere = value
}
</script>

<style lang="scss" scoped>
.slider-box {
  position: absolute;
  top: 810px;
  left: 10px;
  background-color: rgba(29, 37, 45, 0.8);
  padding: 20px;
  border-radius: 10px;
  .slider-demo-block {
    .demonstration {
      width: 80px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
    }
    width: 200px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
}
.btn-box {
  position: absolute;
  top: 80px;
  left: 20px;
  button {
    height: 40px;
  }
  // display: flex;
  // gap: 20px;
  // button {
  //   color: white;
  //   background: #68b0cf;
  //   border: none;
  //   cursor: pointer;
  //   font-size: 16px;
  //   padding: 10px;
  //   border-radius: 10px;
  //   &:hover {
  //     color: #181929;
  //   }
  // }
}
</style>
